<template>
  <view class="details">
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
    ></u-tabs>
    <view v-if="current === 0">
      <u-card
        class="task-list-item"
        :border="false"
        padding="20"
        margin="10rpx 20rpx"
      >
        <view
          slot="head"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <view style="display: flex; align-items: center; font-size: 30rpx"
            ><image
              v-if="viewForm.avatar"
              class="user-images"
              :src="`${baseUrl}${viewForm.avatar}`"
            ></image
            ><image
              v-else
              class="user-images"
              src="/static/aidex/images/userImg.png"
            ></image>
            {{ viewForm.postUserName }}</view
          ><view style="color: #999999; font-size: 22rpx">{{
            viewForm.createTime
          }}</view>
        </view>
        <view class="" slot="body">
          <u-row gutter="16">
            <u-col span="12">
              <view class="apply-text"
                ><span>凭证类型：</span>{{ viewForm.voucherTypeId }}</view
              >
            </u-col>
            <u-col span="12">
              <view class="apply-text"
                ><span>行政区划：</span>{{ viewForm.mofDivName }}</view
              >
            </u-col>
            <u-col span="12">
              <view class="apply-text"
                ><span>单位名称：</span>{{ viewForm.deptName }}</view
              >
            </u-col>
            <u-col span="12">
              <view class="apply-text"
                ><span>操作类型：</span>
                <dict-tag :options="typeList" :value="viewForm.type" />
              </view>
            </u-col>
            <u-col span="12">
              <view class="apply-text"
                ><span>级别：</span>
                <dict-tag :options="levelsList" :value="viewForm.levels" />
              </view>
            </u-col>
            <u-col span="12">
              <view class="apply-text"
                ><span>凭证号：</span>{{ viewForm.voucherNo }}</view
              >
            </u-col>
            <u-col span="12">
              <view class="apply-text"><span>问题描述：</span> </view>
              <view v-html="viewForm.content"></view>
            </u-col>
            <u-col span="12">
              <view class="apply-text"><span>图片：</span></view>
              <view class="imgBox">
                <view
                  class="imgItem"
                  v-for="item in viewForm.imgList"
                  :key="item.id"
                  @click="previewImg(item)"
                >
                  <image
                    :src="item.fileUrl"
                    style="width: 100%; height: 100%"
                    mode="widthFix"
                  ></image>
                </view>
              </view>
            </u-col>
            <u-col span="12">
              <view class="apply-text"><span>文件：</span></view>
              <view class="fileBox">
                <view
                  class="fileItem"
                  v-for="item in viewForm.fileList"
                  :key="item.id"
                  @click="previewFile(item)"
                  style="cursor: pointer"
                >
                  {{ item.fileName }}
                </view>
              </view>
            </u-col>
          </u-row>
        </view>
      </u-card>
    </view>

    <view v-if="current === 1" class="timeLine">
      <view class="line-box">
        <u-time-line>
          <u-time-line-item
            nodeTop="2"
            v-for="item in flowRecordList"
            :key="item.id"
          >
            <!-- 此处自定义了左边内容，用一个图标替代 -->
            <template v-slot:node>
              <view
                class="u-node"
                :style="{ background: item.finishTime ? '#2bc418' : '#b3bdbb' }"
              >
                <!-- 此处为uView的icon组件 -->
                <u-icon
                  v-if="item.finishTime"
                  name="checkmark-circle-fill"
                  color="#fff"
                  :size="24"
                ></u-icon>
                <u-icon v-else name="clock" color="#fff" :size="24"></u-icon>
              </view>
            </template>
            <template v-slot:content>
              <view>
                <view class="u-order-title">{{ item.taskName }}</view>
                <view class="u-order-desc-box">
                  <view class="row">
                    <view class="title"
                      ><u-icon name="account" size="28" class="icon"></u-icon
                      >办理人</view
                    >
                    <view class="content"
                      >{{ item.assigneeName
                      }}<u-tag
                        v-show="item.deptName"
                        :text="item.deptName"
                        type="info"
                        size="mini"
                        style="margin-left: 10rpx"
                    /></view>
                  </view>
                  <view class="row">
                    <view class="title"
                      ><u-icon name="account" size="28" class="icon"></u-icon
                      >候选办理</view
                    >
                    <view class="content">{{ item.candidate }}</view>
                  </view>
                  <view class="row">
                    <view class="title"
                      ><u-icon name="calendar" size="28" class="icon"></u-icon
                      >接收时间</view
                    >
                    <view class="content">{{ item.createTime }}</view>
                  </view>
                  <view class="row">
                    <view class="title"
                      ><u-icon name="calendar" size="28" class="icon"></u-icon
                      >处理时间</view
                    >
                    <view class="content">{{ item.finishTime }}</view>
                  </view>
                  <view class="row">
                    <view class="title"
                      ><u-icon name="clock" size="28" class="icon"></u-icon
                      >耗时</view
                    >
                    <view class="content">{{ item.duration }}</view>
                  </view>
                </view>
                <view class="row" v-if="item.comment">
                  <view class="title"
                    ><u-icon name="order" size="28" class="icon"></u-icon
                    >处理意见</view
                  >
                  <view class="content">{{ item.comment.comment }}</view>
                </view>
              </view>
            </template>
          </u-time-line-item>
        </u-time-line>
      </view>
    </view>

    <view v-if="current === 2">
      <view class="imageBox">
        <image
          :src="`${baseUrl}/business/businessOrder/diagram/${instId}`"
          mode="widthFix"
        ></image>
      </view>
    </view>
  </view>
</template>
<script>
import { processImgTags } from '../../../common/common.js'
import dictTag from '@/components/dict-tag/dict-tag.vue'
export default {
  components: {
    dictTag,
  },
  data() {
    return {
      typeList: [],
      levelsList: [],
      baseUrl: '',
      instId: '',
      list: [
        {
          name: '工单信息',
        },
        {
          name: '操作记录',
        },
        {
          name: '流程图',
        },
      ],
      current: 0,
      viewForm: {}, //基础表单数据
      flowRecordList: [], // 流程流转数据
    }
  },
  async onLoad(query) {
    this.baseUrl = this.vuex_config.baseUrl

    if (query?.id) {
      await this.$u.api.getBusinessOrder(query.id).then((res) => {
        if (res.code == '200') {
          this.viewForm = res.data
          this.viewForm.content = res.data.content
            ? processImgTags(res.data.content, this.vuex_config.baseUrl)
            : ''
          this.viewForm.imgList = this.viewForm.imgList.map((item) => {
            return {
              ...item,
              fileUrl: this.vuex_config.baseUrl + item.fileUrl,
            }
          })
          // console.log(this.viewForm,'viewForm');
          this.instId = res.data.instId
          this.$u.api
            .flowRecord({
              procInsId: this.viewForm.instId,
              deployId: this.viewForm.deployId,
            })
            .then((res) => {
              if (res.code == '200') {
                this.flowRecordList = res.data.flowList
              }
            })
        }
      })
    }
    this.$u.api.getDicts('order_level').then((res) => {
      if (res.code == '200') {
        this.levelsList = res.data.map((item) => {
          return {
            text: item.dictLabel,
            value: item.dictValue,
          }
        })
      }
    })
    this.$u.api.getDicts('order_type').then((res) => {
      if (res.code == '200') {
        this.typeList = res.data.map((item) => {
          return {
            text: item.dictLabel,
            value: item.dictValue,
          }
        })
      }
    })
  },
  methods: {
    change(index) {
      this.current = index
    },
    previewFile(item) {
      uni.downloadFile({
        url: this.vuex_config.baseUrl + item.fileUrl,
        success: function (res) {
          var filePath = res.tempFilePath
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log('打开文档成功')
            },
          })
        },
      })
    },
    previewImg(item) {
      // 图片预览
      let imgsArray = []
      imgsArray[0] = item.fileUrl
      uni.previewImage({
        current: 0,
        urls: imgsArray,
      })
    },
  },
}
</script>
<style lang="scss">
@import '../../../common/uni.css';
page {
  background-color: #f5f5f5;
}
.u-card__foot {
  .u-icon {
    margin-right: 10px;
  }
}
.apply-text {
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  color: #333333;
  span {
    color: #999999;
  }
}
.imgBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .imgItem {
    width: 22%;
    margin: 0 10rpx;
  }
}
.fileBox {
  display: flex;
  flex-direction: column;
  .fileItem {
    height: 50rpx;
    line-height: 50rpx;
  }
}
.user-images {
  width: 28px;
  height: 28px;
  margin-right: 8px;
}
.personnel-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .personnel-user {
    position: relative;
    margin: 5px 9px 0;
  }
  .user-images {
    width: 32px;
    height: 32px;
    margin-right: 0;
  }
  .iconfont {
    position: absolute;
    top: -12px;
    right: -5px;
    color: #fe0100;
  }
}

.timeLine {
  margin: 10rpx 20rpx;
  background-color: #fff;
  .line-box {
    padding: 20rpx 30rpx;
    .u-order-desc-box {
      margin-top: 20rpx;
    }
  }
  .row {
    border: 2rpx solid #eee;
    height: 90rpx;
    display: flex;
    align-items: center;
    .title,
    .content {
      flex: 1;
      padding-left: 20rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .icon {
        margin-right: 6rpx;
      }
    }
    .content {
      flex: 2;
    }
  }
}

.imageBox {
  margin: 10rpx 20rpx;
  background-color: #fff;
  min-height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
